/**
 * 路由
 * <router-view></router-view>
 * <router-link to="/foo">Go to Foo</router-link>
 * 
 * this.$router	路由器对象
 * this.$route 路由对象
 */
import Vue from 'vue'
import VueRouter from 'vue-router'
import Cookies from 'js-cookie';
import routes from './routes'

Vue.use(VueRouter)

// 页面加载进度条
import NProgress from 'nprogress'           
import 'nprogress/nprogress.css'
NProgress.configure({     
  easing: 'ease',  			// 动画方式    
  speed: 500,  				// 递增进度条的速度    
  showSpinner: false, 		// 是否显示加载ico    
  trickleSpeed: 200, 		// 自动递增间隔    
  minimum: 0.3 				// 初始化时的最小百分比
});

/**
 * 导航故障
 */
const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location, onResolve, onReject) {
	if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
	return originalPush.call(this, location).catch(err => err)
}

/**
 * 初始化路由对象
 */
const router = new VueRouter({
	routes, 				// 路由列表
	mode: 'history', 		// 路由模式，取值为history与hash， 默认是hash模式，history利用了history.pushState API完成跳转
	base: '/vue/', 			// 打包路径，默认为/，可以修改 、 两边斜杠要加、页面基础路径
	linkActiveClass: 'active',
});



/**
 * 导航守卫（路由拦截器、路由钩子、前置守卫） 相当于java中的过滤器（filter）
 * to: Route: 即将要进入的目标 路由对象
 * from: Route: 当前导航正要离开的路由
 * next: Function: 一定要调用该方法来 resolve 这个钩子
 */
router.beforeEach((to, from, next) => {
	NProgress.start();
	if (!(to.matched.some(record => record.meta.requiresAuth))) {
		next()
	} else {
		if (Cookies.get('Token')) {
			next();
		} else {
			next({
				path: '/login'
			});
		}
	}
});

/**
 * 后置钩子
 */
router.afterEach(() => {  
	NProgress.done()		// 在即将进入新的页面组件前，关闭掉进度条
})
console.warn('=========================================================================== router')
export default router;


// 1、路由属性配置说明  https://blog.51cto.com/4547985/2390813
// 2、路由钩子（路由拦截）
// 3、路由懒加载（3种模式）
// 4、mode与404
//（1）histroy：URL就像正常的 url，示例：http://localhost:8080/home
//（2）hash：默认值，会多一个“#”，示例：http://localhost:8080/#/home
// 6、路由传递参数（4种方法）				https://blog.51cto.com/4547985/2390799
// 8、页面跳转（3种方式）